<template>
	<div class="ProductDetails" >
		<div v-show="!pageLoading">
			<van-nav-bar title="" left-text="" left-arrow @click-left="onClickLeft" />
			<van-tabs v-model="switchTabActive" @click="goTabs" id="pro-tabs">
				<van-tab v-for="(value, index) in switchTabList" :key="index" :title="value"></van-tab>
			</van-tabs>
			<div class="swiper-box">
				<van-swipe :autoplay="3000" @change="handleChangeBanner" id="banner_scroll">
					<!--<van-swipe-item>
						<video width="100%" height="" v-if='goodsInfo.video' autoplay controls>
							<source :src="goodsInfo.video" type="video/mp4"></source>
							<source :src="goodsInfo.video" type="video/ogg"></source>
							<source :src="goodsInfo.video" type="video/webm"></source>
							<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
								<param name="movie" value="myvideo.swf" />
								<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
							</object> 当前浏览器不支持 video直接播放，点击这里下载视频：
							<a href="myvideo.webm">下载视频</a>
						</video>
					</van-swipe-item>-->
					<van-swipe-item v-for="(item, index) in goodsInfo.goods_images" :key="index">
						<img v-lazy="item" width="100%" />
					</van-swipe-item>
				</van-swipe>
				<div class="banner-point">
					{{activeScroll}}/{{bannersScroll}}
				</div>
			</div>
			<van-panel class="pro-message">
				<div>
					<div class="prices">￥<span v-for="(price, index) in getPrice" :key="index" :class="'price' + index">{{ price + (index == 0 ? '.' : '') }}</span><span class="stock">库存：{{goodsInfo.store}}</span></div>
					<h3 class="pro-message-title">{{goodsInfo.model}}</h3>
					<p class="describe">{{goodsInfo.title}}</p>
				</div>
			</van-panel>
			<van-panel :title="goodsInfo.express" :status='inst_name' class='site'>
				<div><span class="send-to">送至</span>
					<van-cell-group class="site-data" @click.native="handleAddCart">
						<van-cell :title="getAddress" icon="location" color="#f44" :label="'您所属得地区为' + inst_name" is-link />
						<!--<van-cell value='您所属得地区为杭州营销中心' />-->
					</van-cell-group>
				</div>
			</van-panel>
			<van-panel title="今日16:00前付款，当天发货" class="data-message">
				<div><span class="guige">规格</span><span class="cs">{{specifications}}</span></div>
			</van-panel>
			<div class="imgs" v-show="imgs_show">
				<div id="content" v-html="goodsInfo.content"></div>
				<div id="parameter" v-html="goodsInfo.param_base" style="margin-top: 10px;"></div>
			</div>
			<!--<van-cell-group id="topScroll">
				<div class="scroll-top"><i class="line"></i>
					<van-icon name="arrow" />上拉查看图文详情<i class="line"></i></div>
			</van-cell-group>-->
			<van-sku class="addcart" reset-stepper-on-hide close-on-click-overlay v-model="showBuyModel" @stepper-change="handleStepperChange" :sku="skuData" :hide-stock="hideStock" :show-add-cart-btn="cartBtn" stepper-title="数量">
				<!--自定义-header-->
				<template slot="sku-header" slot-scope="props">
					<div class="van-sku-header sku-header-content">
						<van-row>
							<van-col span="6">
								<img :src="goodsInfo.spic" width="100%" />
							</van-col>
							<van-col span="18" class="sku-header-content--box">
								<div class="sku-message">
									<h6>￥<span class="sku-price" v-for="(price, index) in getPrice" :key="index" :class="'price' + index">{{ price + (index == 0 ? '.' : '') }}</span></h6>
									<p>库存{{goodsInfo.store}}件</p>
								</div>
								<van-icon name="close" @click="hideBuyModel" />
							</van-col>
						</van-row>
					</div>
				</template>
				<!-- 自定义 sku group -->
				<template slot="sku-group" slot-scope="props">
					<div class="van-sku-group">
						<div class="send-to-address">
							<h5 class='address_title'>送至</h5>
							<van-cell-group @click.native='show_address_popup'>
								<van-cell :title="getAddress" icon="location" label='预计2-3天发货' is-link />
							</van-cell-group>
						</div>
						<div class="specifications">
							<van-panel title="规格">
								<ul class="clearfix">
									<li class="on">{{specifications}}</li>
								</ul>
							</van-panel>
						</div>
					</div>
				</template>
				<!-- 自定义 sku actions -->
				<template slot="sku-actions" slot-scope="props">
					<div class="van-sku-actions">
						<!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
						<van-button type="primary" bottom-action @click="handleAddCartSubmit" v-if="goodsInfo.store != 0">确认</van-button>
						<van-goods-action-big-btn text="暂不支持购买" class="on" v-else />
					</div>
				</template>
			</van-sku>
			<van-popup v-model="showSelectAddressModel" position="bottom" :overlay="true" class='sites'>
				<van-nav-bar title="所在城市" left-text="" left-arrow @click-left="hide_address_popup" @click-right="hide_address_popup">
					<van-icon name="close" slot="right" />
				</van-nav-bar>
				<div class="site-box">
					<div class="siteClass">
						<ul class='siteName'>
							<li v-for="(value, index) in regionData" :class="index==0 ? 'on' : ''" :key='index' @click='siteClass($event,index)'>{{value}}</li>
						</ul>
					</div>
					<ul class="siteList">
						<li :class="index == 0 ? 'active' : ''" v-for='(value,index) in classify' :key='index' @click.stop="getSite(value,index)">{{value.name}}
							<van-icon v-if='index==0' name="success" /> </li>
					</ul>
				</div>
			</van-popup>
			<van-goods-action>
				<van-goods-action-mini-btn icon="cart" text="购物车" :info="cartCount" @click="$router.push({name: 'cart'})" />
				<van-goods-action-big-btn text="加入购物车" @click="handleAddCart" v-if="goodsInfo.store != 0" />
				<van-goods-action-big-btn text="暂不支持购买" class="on" v-else />
			</van-goods-action>
		</div>
		<van-toast :mask="true" message="加载中..." type="loading" v-model="loading"></van-toast>
		<van-toast :mask="true" class='addressLoading' message="加载中..." type="loading" v-model="getAddressLoading"></van-toast>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions,
		mapState
	} from 'vuex'
	import {
		getGoodsInfo,
		getStoreArea,
		getStore
	} from '@/api/goods/index.js'
	import { addCart } from '@/api/cart/index.js'
	export default {
		name: 'goodsDetail',
		data () {
			return {
				goodsId: 0,
				pageLoading: true,
				loading: false,
				getAddressLoading: false,
				switchTabList: ['商品', '详情', '参数'],
				switchTabActive: 0,
				goodsInfo: {},
				address_info: {},
				bannersScroll: '',
				activeScroll: 1,
				
				pro_message: {
					price: ''
				},
				
				
				showBuyModel: false,
				showSelectAddressModel: false,
				quota: 100,
				quotaUsed: 10,
				cartBtn: false,
				hideStock: true,
				
				active1: 0,
				inst_name: '',
				specifications: '',
				regionData: [],
				classify: [],
				siteType: 1,
				addressGrade: '',
				
				province_code: '',
				city_code: '',
				district_code: '',
				street_code:'',
				
				imgs_show: true,
				
				skuData: {
					tree: [
						{
							k: '', // skuKeyName：规格类目名称
							v: [
								{
									id: '',
									name: '',
									imgUrl: ''
								},
								{
									id: '',
									name: '',
									imgUrl: ''
								}
							],
							k_s: '' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
						}
					],

				},
				goodsQuantity: 1,
				goods: {},
				widScrollTop: '',
				topOffsetTop: '',
				addressInfoName: []
			}
		},
		computed: {
			...mapGetters(['cartCount']),
			getPrice () {
				// `this` 指向 vm 实例
				return this.pro_message.price.split('.')
			},
			getAddress: function(){
				this.addressInfoName = []
				this.addressInfoName.push(this.address_info.province)
				this.addressInfoName.push(this.address_info.city)
				this.addressInfoName.push(this.address_info.section)
				this.addressInfoName.push(this.address_info.street)
				return this.addressInfoName.join('')
			}
		},
		
		created () {
			this.getCartCount()
		},
		
		activated () {
			this.goodsId = this.$route.query.id
			this.getData()
		},
		
		methods: {
			...mapActions(['getCartCount']),
			getData () {
				this.loading = true
				this.regionData = []
				this.classify = []
				getGoodsInfo(this.goodsId).then((res) => {
					this.getAddressLoading = false
					this.pageLoading = false
					this.loading = false
					
					this.goodsInfo = res.data.goods_data;
					this.bannersScroll = this.goodsInfo.goods_images.length;
//					if(this.goodsInfo.video){
//						this.bannersScroll+=1;
//					}

					
					this.pro_message.price = res.data.goods_data.price;
					this.specifications = this.goodsInfo.color + ',' + this.goodsInfo.power + ',' + this.goodsInfo.is_frequency + ',' + this.goodsInfo.level

					
					
					this.inst_name = res.data.inst_name;
					this.address_info = res.data.address_info;
					
					
					
					this.regionData.push(this.address_info.province);
					this.regionData.push(this.address_info.city);
					this.regionData.push(this.address_info.section);
					this.regionData.push(this.address_info.street);

					this.provinceList = res.data.province;

					for(let i in res.data.province) {
						this.classify.push(res.data.province[i]);
					}
					
					
				}).catch(() => {
					this.getAddressLoading = false
					this.pageLoading = false
					this.loading = false
					this.goodsInfo = []
				})
			},
			
			handleStepperChange (value) {
				this.goodsQuantity = value
			},
			
			handleChangeBanner (index) {
				this.activeScroll = index + 1
			},
			
			onClickLeft() {
				this.$router.go(-1);
				
			},
			
			handleAddCart () {
				this.goodsQuantity = 1
				this.showBuyModel = true
			},
			hideBuyModel () {
				this.showBuyModel = false
			},
			
			goTabs(index, title) {
				switch(index) {
					case 0:
						this.$el.querySelector('#pro-tabs').scrollIntoView();
						break;
					case 1:
						this.$el.querySelector('#content').scrollIntoView();
						break;
					case 2:
						this.$el.querySelector('#parameter').scrollIntoView();
						break;
					default:
						break;
				}
			},
			show_address_popup() {
				this.showBuyModel = false
				this.showSelectAddressModel = true
			},
			
			hide_address_popup() {
				this.showBuyModel = true
				this.showSelectAddressModel = false
				this.getStoreData();
			},
			
			getSite(index, title) {
				this.getAddressLoading = true
				this.classify = [];
				
				var siteNameS = document.getElementsByClassName('siteName')[0].childNodes;
				
				siteNameS.forEach(function(data){
					data.classList.remove('on');
				});
				
				
				if(index.p_type == 0 ){
					this.siteType = 1
					this.regionData[1] = ''
					this.regionData[2] = ''
					this.regionData[3] = ''
					this.province_code = index.code;
					this.city_code = ''
					this.district_code = ''
					this.street_code = ''
					siteNameS[0].classList.add("on");
				}else if(index.p_type == 1){
					this.siteType = 2
					this.province_code
					this.city_code = index.code;
					this.district_code = ''
					this.street_code = ''
					this.address_info.city = index.name
					
					this.regionData[2] = ''
					this.regionData[3] = ''
					
					this.regionData[1] = index.name
					
					siteNameS[1].classList.add("on");
				}else if(index.p_type == 2){
					this.siteType = 3
					this.province_code
					this.city_code
					this.district_code = index.code;
					this.street_code = ''
					this.address_info.section = index.name
					this.regionData[3] = ''
					this.regionData[4] = ''
					this.regionData[2] = index.name
					
					siteNameS[2].classList.add("on");
				}else if(index.p_type == undefined){
					this.address_info.street = index.name
					this.regionData[3] = index.name
					this.street_code = index.code
					siteNameS[3].classList.add("on");
				}
				this.getSiteList();
			},
			
			getSiteList() {
				getStoreArea(this.siteType, this.province_code, this.city_code, this.district_code).then((res) => {
					this.getAddressLoading = false
					this.classify = []
					for(let x in res.data) {
						this.classify.push(res.data[x]);
					}
					if(res.data.length == 0){
						
						this.showBuyModel = true
						this.showSelectAddressModel = false
						this.getStoreData();
					}
				}).catch(() => {
					
					this.getAddressLoading = false
				})
			},
			getStoreData() {
				getStore(this.province_code, this.city_code, this.district_code,this.street_code,this.goodsInfo.goods_code).then((res) => {
					this.getAddressLoading = false
					this.goodsInfo.store = res.data.store
					if(this.data.store == 0){
						this.$toast('查询暂无库存')
					}
				}).catch((error) => {
					this.loading = false;
				})
			},
			siteClass(el, index) {
				this.getAddressLoading = true
				el.currentTarget.parentNode.childNodes.forEach(function(val) {
					val.classList.remove('on');
				})
				el.currentTarget.classList.add("on");
				switch(index) {
					case 0:
						this.city_code = ''
						this.district_code = ''
						this.street_code = ''
						this.address_info.city = ''
						this.address_info.section = ''
						this.address_info.street = ''
						this.classify = [];
						
						for(let i in this.provinceList) {
							this.classify.push(this.provinceList[i]);
						}
						
						this.regionData[1] = ''
						this.regionData[2] = ''
						this.regionData[3] = ''
						
						this.getAddressLoading = false
						
						break;
					case 1:
						this.siteType = 1
						
						this.district_code = ''
						this.street_code = ''
						this.address_info.section = ''
						this.address_info.street = ''
						
						this.regionData[2] = ''
						this.regionData[3] = ''
						
						this.getSiteList()
						break;
					case 2:
						this.siteType = 2
						
						this.street_code = ''
						
						this.address_info.street = ''
						this.regionData[3] = ''
						this.getSiteList();
						break;
					case 3:
						this.siteType = 3
						this.district_code = ''
						this.street_code = ''
						
						this.getSiteList()
						break;
					default:
						break;
				}
			},
			
			handleAddCartSubmit () {
				this.loading = true
				addCart(this.goodsInfo.goods_id, this.goodsQuantity).then((res) => {
					this.loading = false
					this.showBuyModel = false
					if (res.status == 0) {
						this.$toast.success(res.message ? res.message : '购物车加入成功')
						this.getCartCount()
					} else {
						this.$toast(res.message ? res.message : '购物车加入失败')
					}
				}).catch(() => {
					this.loading = false
					this.$toast('购物车加入失败')
				})
			},
			
//			handleScroll() {
//				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//				var offsetTop = document.querySelector('#topScroll').offsetTop
//				if(scrollTop >= 100) {
//					this.imgs_show = true
//				} else {
//					this.imgs_show = false
//				}
//			}
			
		},
		mounted () {
//			window.addEventListener('scroll', this.handleScroll)
		},
		destroyed() {
//			window.removeEventListener('scroll', this.handleScroll)
		}

	}
</script>

<style lang="scss">
	@import "../../styles/color.scss";
	.van-toast--default{
		width: 130px;
		min-height: 130px;
	}
	.ProductDetails {
		padding-bottom: 50px;
		padding-top: 44px;
		.van-tabs__wrap {
			top: 0;
			left: 0;
			right: 0;
			z-index: 999 !important;
			overflow: hidden;
			position: fixed;
			width: 35%;
			margin: 0 auto;
		}
		.swiper-box {
			position: relative;
		}
		.van-swipe__track {
			position: relative;
		}
		.clearfix:after:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.van-tabs--line {
			padding-top: 0;
		}
		.van-swipe__indicators {
			display: none;
		}
		.van-button--bottom-action {
			width: 60%;
			background-color: $checkBoxColor;
		}
		.van-button--bottom-action.on {
			background-color: $ashColor;
		}
		.van-goods-action-mini-btn {
			min-width: 40%;
		}
		.van-cell__title {
			color: $checkBoxColor;
		}
		.van-panel__content {
			text-align: left;
		}
		.van-panel__content {
			padding: 10px;
		}
		.banner-point {
			position: absolute;
			bottom: 15px;
			right: 25px;
			background-color: rgba(0, 0, 0, .2);
			border-radius: 10px;
			width: 40px;
			height: 20px;
			line-height: 20px;
			color: #FFFFFF;
			/*padding: 10px;*/
		}
		/*弹出框*/
		.van-sku-header__img-wrap {
			margin-top: 0;
		}
		.pro-message {
			.van-panel__header {
				display: none;
			}
			.pro-message-title {
				margin-top: 15px;
				margin-bottom: 10px;
			}
			.prices {
				color: $checkBoxColor;
				/*float: left;*/
				font-size: 0.4rem;
				font-weight: 700;
			}
			.price0 {
				font-size: 0.6rem;
			}
			.price1 {}
			.stock {
				float: right;
				color: $ashColor;
				line-height: 34px;
				font-size: 0.28rem;
			}
			.describe {
				color: $ashColor;
				margin-top: 0;
				margin-bottom: 0;
				font-size: 0.28rem;
				word-wrap: break-word;
			}
		}
		.data-message {
			font-size: 0.28rem;
			.van-cell__title {
				font-size: 0.28rem;
				color: #333333;
				padding-left: 60px;
			}
			.van-panel__content {
				padding: 10px 15px;
				.guige {
					display: inline-block;
					width: 60px;
					color: $ashColor;
				}
				.cs {
					color: #333333;
					font-weight: 700;
				}
			}
		}
		.site {
			margin-top: 10px;
			font-size: 0.28rem;
			.van-cell__value {
				color: $ashColor;
			}
			.van-cell__title {
				color: $ashColor;
				font-size: 0.28rem;
			}
			.van-panel__content {
				color: $ashColor;
				padding: 10px 15px;
			}
			.site-data {
				display: inline-block;
				width: 86%;
				.van-cell {
					padding: 0;
				}
				.van-cell__title {
					color: $titleColor;
				}
				.van-cell__left-icon {
					color: #FF4444;
				}
				.van-cell__label {
					color: $ashColor;
					padding-top: 5px;
					font-size: 0.28rem;
				}
			}
			.van-hairline--top-bottom::after {
				border: none;
			}
			.send-to {
				display: inline-block;
				width: 35px;
				font-size: 0.28rem;
			}
		}
		.imgs {
			font-size: 0;
			margin-top: 10px;
			img:last-child {
				/*margin-top: 10px;*/
			}
			img {
				width: 100%;
			}
			#parameter {
				font-size: 0.24rem;
			}
		}
		.addcart {
			.van-button--bottom-action {
				width: 100%;
			}
			.van-sku-group-container {
				text-align: left;
			}
			.van-sku-header__goods-info {
				text-align: left;
			}
			.van-sku-row__item {
				border-radius: 20px;
				background-color: #fef4f3;
				border-color: $ashColor;
			}
			.van-sku-row__item--active {
				color: #333;
				border-color: $checkBoxColor;
			}
			.van-hairline--bottom::after {
				border-bottom: none;
			}
		}
		.scroll-top {
			height: 45px;
			line-height: 45px;
			padding: 0 15px;
			color: $ashColor;
			.van-icon-arrow {
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg);
				/* Safari 和 Chrome */
				vertical-align: middle;
				margin: 0 5px;
			}
			.line {
				display: inline-block;
				width: 25%;
				height: 1px;
				background-color: #eaeaea;
				vertical-align: middle;
				margin: 0 5px;
			}
		}
		.send-to-address {
			font-size: 0.28rem;
			.address_title {
				margin: 0;
				text-align: left;
				padding-left: 15px;
				color: #333;
				font-size: 0.28rem;
				font-weight: 400;
				margin-top: 10px;
			}
			.van-cell__title {
				color: $titleColor;
			}
			.van-hairline--top-bottom::after {
				border-top: none;
				border-bottom: none;
			}
			.van-cell__left-icon {
				color: $checkBoxColor;
			}
			.van-cell__label {
				padding-top: 5px;
				font-size: 0.28rem;
				color: #999;
			}
		}
		.specifications {
			border: none;
			.van-cell__title {
				color: $titleColor;
			}
			.van-hairline--top-bottom::after,
			.van-cell:not(:last-child)::after {
				border: none;
			}
			.van-cell {
				padding: 0;
				padding-left: 15px;
			}
			.van-panel__content {
				padding-left: 15px;
				overflow: hidden;
			}
			li {
				float: left;
				padding: 5px 10px;
				border: 1px solid $ashColor;
				background-color: #fef4f3;
				border-radius: 20px;
				font-size: 0.24rem;
				margin-right: 5px;
				margin-top: 5px;
				color: $ashColor;
			}
			li.on {
				border: 1px solid $checkBoxColor;
				background-color: #fef4f3;
				color: $titleColor;
			}
		}
		.van-sku-messages {
			display: none;
		}
		.sku-header-content {
			text-align: left;
			h6 {
				margin: 0;
				color: $checkBoxColor;
				font-size: 0.28rem;
				.sku-price {
					font-size: 0.4rem;
				}
			}
			p {
				margin: 0;
				margin-top: 10px;
				font-size: 0.24rem;
				font-weight: 400;
				color: $descColor;
			}
			.sku-message {
				position: absolute;
				bottom: 0;
				left: 10px;
			}
			.van-icon-close {
				position: absolute;
				top: 10px;
				right: 10px;
				font-size: 0.4rem;
			}
			img{
				width: 90px;
				height: 90px;
			}
		}
		.sites {
			top: 50%;
			.van-popup--bottom {
				top: initial;
			}
			.van-icon-success {
				color: $checkBoxColor;
				margin-left: 5px;
			}
			.van-tab {
				display: inline-block;
				padding: 0 15px;
			}
			.van-tabs__nav {
				display: inline-block;
			}
			.van-tabs__wrap {
				position: relative;
				top: 46px;
				width: 100%;
				text-align: left;
			}
			.van-tabs__content {
				position: absolute;
				top: 90px;
				line-height: 50px;
				padding: 0 15px;
			}
			li {
				line-height: 40px;
			}
			li.active {
				color: $checkBoxColor;
			}
			.site-box {
				padding-top: 46px;
				li.on {
					border-bottom: 2px solid $checkBoxColor;
					color: $checkBoxColor;
				}
			}
			.siteList {
				text-align: left;
				padding-left: 15px;
			}
		}
		.siteClass {
			ul {
				overflow: hidden;
				border-bottom: 1px solid #E5E5E5;
				li {
					float: left;
					width: 20%;
				}
			}
		}
		.addressLoading{
			z-index: 99999 !important;
			top: 83%;
			width: 90px;
			min-height: 90px;
			padding: 0;
		}
		.van-nav-bar .van-icon{
			font-weight: 400;
			color: #666666;
			font-size: 0.4rem;
		}
		.sku-header-content--box{
			position: relative;
			height: 90px;
		}
		
	}
	
	@media (max-width: 360px) {
		.ProductDetails .scroll-top .line{
			width: 20%;
		}
		.van-tab span{
			font-size: 0.27rem;
		}
	}
	.van-dialog .van-button {
		/*color: $checkBoxColor;*/
	}
</style>